<template>
  <div v-loading='loading'>
      <div class="cons clearfix">
        <span class="h1">工程征地管理系统</span>
        <div  class="ser fr">
          <el-select v-model="proValue" placeholder="请选择工程项目" filterable   @change="changePro()">
            <el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
          <el-cascader :options="regions" v-model="region" separator='-' change-on-select filterable clearable  placeholder="请选择行政区域"></el-cascader>
          <el-button type="primary" @click='sear()'>查询</el-button>
        </div>
    </div>
    <div class="Legend">
      <ul>
        <li style="background:#5D9CEC;">
          <div class="left fl">
            <i class="el-icon-picture-outline"></i>
          </div>
          <div class="right fr">
            <span>{{load}}万元</span>
            <label>土地征收金额</label>
          </div>
        </li>
        <li style="background:#27C24C;">
           <div class="left fl">
            <i class="el-icon-news"></i>
          </div>
          <div class="right fr">
            <span>{{silva}}万元</span>
            <label>树木征收金额</label>
          </div>
        </li>
        <li style="background:#23B7E5;">
           <div class="left fl">
            <i class="el-icon-date"></i>
          </div>
          <div class="right fr">
            <span>{{house}}万元</span>
            <label>房屋主体征收金额</label>
          </div>
        </li>
        <li style="background:#37BC9B;">
           <div class="left fl">
            <i class="el-icon-star-off"></i>
          </div>
          <div class="right fr">
            <span>{{fwzx}}万元</span>
            <label>房屋装修征收金额</label>
          </div>
        </li>
        <li style="background:#7266BA;">
           <div class="left fl">
            <i class="el-icon-share"></i>
          </div>
          <div class="right fr">
            <span>{{wsqy}}万元</span>
            <label>坟山迁移征收金额</label>
          </div>
        </li>
        <li style="background:#D53A35;">
           <div class="left fl">
            <i class="el-icon-edit-outline"></i>
          </div>
          <div class="right fr">
            <span>{{tszc}}万元</span>
            <label>特殊征收金额</label>
          </div>
        </li>
      </ul>
    </div>
    <div class="echar clearfix">
        <div class="left clearfix">
          <div id="bar" class="bar fl"></div>
          <div class="pics fr">
          	<img src="../../assets/标准LOGO.jpg" />
          	<img src="../../assets/ewm.jpg" />
          </div>
        </div>
        <div class="right">
            <span>未领取补偿人员统计表</span>
            <table  cellspacing="0" cellpadding="0" border="0" style="width:100%;">
                <thead>
                    <tr>
                        <th>序号</th>
						            <th>姓名</th>
						            <th>区域</th>
						            <th>电话</th>
						            <th>地块编号</th>
						            <th>地类</th>
						            <th>位置或桩号</th>
						            <th>①土地面积㎡</th>
						            <th>其中红线内㎡</th>
						            <th>其中红线外㎡</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in tableData" :key="index">
										<td>{{index+1}}</td>
										<td>{{item.MainName}}</td>
										<td>{{item.RegionStr}}</td>
										<td v-if="item.Tel!='未填写'">{{item.Tel}}</td>
										<td v-else></td>
										<td>{{item.ItemCode}}</td>
										<td>{{item.ItemID}}</td>
										<td>{{item.PointCode}}</td>
										<td>{{item.Amount}}</td>
										<td>{{item.RedInSq}}</td>
										<td>{{item.RedOutSq}}</td>
									</tr>
                </tbody>
            </table>
            <div class="pages">
							<el-pagination small :page-size="5" :current-page="pages" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background>
							</el-pagination>
						</div>
        </div>
    </div>
  </div>
</template>
<script>
import api from "../../axios/api";
// 引入 ECharts 主模块
const echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/bar");
// 引入饼图
require("echarts/lib/chart/pie");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
export default {
  name: "index",
  data() {
    return {
    	loading:false,
      region: [],
      proValue: "",
      search:'',
      options: [],
      regions: [],
      tableData: [], // 未领取补偿人员统计表
      load:'',//土地
      silva:'',//森林
      house:'',//房屋
      fwzx:'',//房屋装修
      wsqy:'',//坟山迁移
      tszc:'',//特殊征拆
      pages:1,
      total:1,
      jindu:{},
      LandPlanPercent:[],
      xData:[],
      HousePercent:[],
      GarvePercent:[]
    };
  },
  mounted() {
    let clientWidth = document.body.clientWidth;
    if (clientWidth < 1370) {
    }    
  },
  created(){
  	this.getlistde();
  },
  methods: {
  	//获取首页数据
  	gethome(){
  		this.$post(api.gethome,{
			  "ProjectID": this.proValue,
			  "RegionID": this.region[this.region.length - 1],
			}).then(res=>{
				if(res.state==200){
						this.load = res.Data.TdAmount
						this.silva = res.Data.SmAmount
						this.house = res.Data.FwztAmount
						this.fwzx = res.Data.FwzxAmount
						this.wsqy = res.Data.FsAmount
						this.tszc = res.Data.TsAmount
				}else{
					this.$message.error(res.msg);
				}
			})
  	},
  	handleCurrentChange(val){
  		this.pages = val;
      this.nopan();
  	},
  	//搜索
  	sear(){
  		this.gethome()
  		this.pages=1
  		this.nopan()
  		this.gethomedata()
  	},
  	//获取列表
    nopan() {
      this.loading = true;
      this.$post(api.nopan, {
        Para: {
          QueryKeyWord: this.search,
          RegionID: this.region[this.region.length - 1],
          ProjectID: this.proValue
        },
        PageSize: 5,
        PageIndex: this.pages - 1,
        OrderString: "",
        ToExcel: false
      }).then(res => {
        if (res.isOK == true && res.state == 200) {
          this.loading = false;
          this.tableData = res.Data.Data;
          this.total = res.Data.Items ? res.Data.Items : 1;
        } else {
          this.loading = false;
          this.$message.error(res.msg);
        }
      });
    },
    //当项目改变的时候重新拉取行政区域
    changePro() {
      this.region = [];
      this.anonymousget(this.proValue);
    },
    //获取项目
    getlistde() {
      this.$post(api.getlistde)
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.options = response.Data;
            this.proValue = this.options[0] ? this.options[0].ID : "";
            this.anonymousget(this.proValue);
          } else {
            this.$message.error(response.msg);
          }
        })
        .catch(error => {
          this.$message.error("服务器内部错误");
        });
    },
    //获取行政区域
    anonymousget(val) {
      this.regions = [];
      if (!val) {
        return false;
      }
      this.$get(api.anonymousget + "/" + val)
        .then(response => {
          if (response.data.isOK == true && response.data.state == 200) {
            for (var i = 0; i < response.data.Data.length; i++) {
              this.regions.push({
                label: response.data.Data[i].RegionName,
                value: response.data.Data[i].ID,
                ParentID: response.data.Data[i].ParentID
              });
            }
            this.regions = this.$toTree(this.regions);
            this.region.push(this.regions[0].value);
            this.nopan()
            this.gethome()
            this.gethomedata()
          } else {
            this.$message.error(response.data.msg);
          }
        })
        .catch(error => {
          this.$message.error("服务器内部错误");
        });
    },
		gethomedata(){
			this.$post(api.gethomedata,{
				RegionID: this.region[this.region.length - 1],
        ProjectID: this.proValue
			}).then(res=>{
				if(res.state==200){
					this.jindu=[]
					this.LandPlanPercent=[]
					this.HousePercent=[]
					this.GarvePercent=[]
					this.xData=[]
					this.jindu=res.Data.PlanDaata
					this.LandPlanPercent.push(this.jindu.LandPlanPercent)
		      this.HousePercent.push(this.jindu.HousePercent)
		      this.GarvePercent.push(this.jindu.GarvePercent)
		      this.xData.push(this.jindu.Regions)
					this.fnBar()	
				}else{
					this.jindu=[]
					this.LandPlanPercent=[]
					this.HousePercent=[]
					this.GarvePercent=[]
					this.xData=[]
					this.fnBar()	
					this.$message.error(res.msg);
				}
			})
		},
    fnBar() {
      var myBar = echarts.init(document.getElementById("bar"));
      var legend = {	    	
			  orient: 'vertical',  
			  left: 'left',
				data:['土地征用','房屋主体','坟山搬迁']
			};
			myBar.legend = legend;
      myBar.setOption({
				color: ["#CDC477", "#006699", "#4cabce"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {  
	        orient: 'horizontal', 
	        y:'10px',
	        data:['土地征用','房屋主体','坟山搬迁'] 
    		},  
        xAxis: [
        	{
            type: "category",
            data: this.xData,
            axisLabel:{ //调整x轴的lable  
		            textStyle:{
		                fontSize:18 // 让字体变大
		            }
		        }
          }
        ],
        yAxis: {  
        		type: "value",
            max: "100",
            axisLabel: {
              formatter: "{value} %"
            }
        },
        series: [
	        {
	            name: "土地征用",
	            type: "bar",
	            barMaxWidth: 120,
	            data: this.LandPlanPercent,
	            label: {
	              normal: {
	                show: true,
	                position: "top",
	                formatter: "{c}%",
	                textStyle: {
	                  color: "black",
	                  fontSize: "16"
	                }
	              }
	            }
	          },
	          {
	            name: "房屋主体",
	            type: "bar",
	            barMaxWidth: 120,
	            data: this.HousePercent,
	            label: {
	              normal: {
	                show: true,
	                position: "top",
	                formatter: "{c}%",
	                textStyle: {
	                  color: "black",
	                  fontSize: "16"
	                }
	              }
	            }
	          },
	          {
	            name: "坟山搬迁",
	            type: "bar",
	            barMaxWidth: 120,
	            data: this.GarvePercent,
	            label: {
	              normal: {
	                show: true,
	                position: "top",
	                formatter: "{c}%",
	                textStyle: {
	                  color: "black",
	                  fontSize: "16"
	                }
	              }
	            }
	          },
        	]	
      });
    }
  }
};
</script>
<style scoped>
.cons {
  width: 100%;
  padding: 15px 0;
  background: #fff;
  border-bottom: 1px solid #d6dfe6;
}
.cons .h1 {
  font-size: 24px;
  color: #929292;
  font-weight: 600;
}
.cons .ser {
  display: inline-block;
}
.Legend {
  width: 100%;
  min-width: 1193px;
}
.Legend ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20px 0;
}
.Legend ul li {
  width: 15%;
  height: 94px;
  /* padding: 5px; */
  box-sizing: border-box;
  border-radius: 5px;
  color: #ffffff;
}
.Legend ul li .left {
  display: inline-block;
  height: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
  text-align: left;
  background: rgba(0, 0, 0, 0.2);
}
.Legend ul li .left i {
  font-size: 50px;
  line-height: 84px;
}
.Legend ul li label {
  display: block;
  line-height: 42px;
  font-size: 12px;
}
.Legend ul li span {
  display: block;
  height: 42px;
  line-height: 42px;
  font-weight: 600;
  font-size: 18px;
}
.Legend ul li .right {
  display: inline-block;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
  text-align: right;
}
.echar {
  width: 100%;
  margin-bottom: 20px;
}
.echar .left {
  width: 100%;
  box-sizing: border-box;
}
.echar .right {
  width: 100%;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 10px;
  border: 1px solid #d1dce3;
  border-top: 3px solid #d1dce3;
  margin-top: 20px;
}
.echar .cir {
  width: 39%;
  height: 500px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #d1dce3;
  border-top: 3px solid #d1dce3;
  /* margin-right: 1%; */
}
.echar .bar {
  width: 59%;
  height: 500px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #d1dce3;
  border-top: 3px solid #d1dce3;
}

.echar .right table {
  width: 100%;
  color: #606266;
  margin: auto;
  border-collapse: collapse;
  font-size: 13px;
}
.echar .right table td,
.echar .right table th {
  text-align: center;
  padding: 5px;
  border: 1px solid #ebeef5;
}
.echar .right span {
  width: 100%;
  display: inline-block;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  padding-bottom: 10px;
}
.pics{
	width: 40%;
	text-align: center;
	padding-top: 7%;
	height: 500px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #d1dce3;
  border-top: 3px solid #d1dce3;
}
.pics img{
	width: 40%;
}
</style>


